<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证：validate</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myTest">
<form  name="custom_form" novalidate>
        <input multiple-email name="user_email" ng-model="user.email" required  placeholder="自定义验证，多个邮箱地址，以“；”或者“;”分割" />
        验证通过：{{custom_form.user_email.$valid}}
        <input class="btn btn-primary btn-lg" ng-disabled="custom_form.$invalid" type="submit" value="提交" /><div class="form-group">
    <input type="text" class="form-control" name="userAge" ng-model="user.age" even required placeholder="数字必须是偶数">
    <span class="error" ng-show="custom_form.userAge.$error.even">数字必须是偶数</span>
    <input type="text" class="form-control" name="userName" ensure-unique="username" ng-model="user.name" required>
    <span class="error" ng-show="custom_form.userName.$error.unique">Required!</span>
</div>
</form>
<script>
    angular.module("myTest", [])
        .directive('multipleEmail', [function () {
            return {
                require: "ngModel",
                link: function (scope, element, attr, ngModel) {
                    if (ngModel) {
                        var emailsRegexp = /^([a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*[;；]?)+$/i;
                    }
                    var customValidator = function (value) {
                        var validity = ngModel.$isEmpty(value) || emailsRegexp.test(value);
                        ngModel.$setValidity("multipleEmail", validity);
                        return validity ? value : undefined;
                    };
                    ngModel.$formatters.push(customValidator);
                    ngModel.$parsers.push(customValidator);
                }
            };
        }])
        .directive('even',function(){
            return {
                restrict:"A",
                require:"ngModel",
                link:function(scope,ele,attrs,ngModelController){
                    ngModelController.$parsers.push(function(viewValue){
                        if(viewValue % 2 === 0){
                            ngModelController.$setValidity('even',true);
                        }else{
                            ngModelController.$setValidity('even',false);
                        }
                        return viewValue;
                    });
                }
            }
        })
        .directive('ensureUnique', ['$http','$timeout','$window',function($http,$timeout,$window) {
            return {
                restrict:"A",
                require: 'ngModel',
                link: function(scope, ele, attrs, ngModelController) {
                    scope.$watch(attrs.ngModel, function(n) {
                        if (!n) return;
                        $timeout.cancel($window.timer);
                        $window.timer = $timeout(function(){
                            $http({
                                method: 'get',
                                url: '/api/checkusername/', //根据换成自己的url
                                params:{
                                    "username":n
                                }
                            }).success(function(data) {
                                ngModelController.$setValidity('unique', data.isUnique); //这个取决于你返回的，其实就是返回一个是否正确的字段，具体的这块可以自己修改根据自己的项目
                            }).error(function(data) {
                                ngModelController.$setValidity('unique', false);
                            });
                        },500);
                    });
                }
            };
        }]);
</script>
</body>
</html>